<template>
    <div>
        <title-bar :title="TitleText"/>
        <text @click="onTest">测试</text>
        <text>{{text}}</text>
    </div>
</template>
<script>
import TitleBar from "../components/TitleBar";
export default {
  components: {
    TitleBar
  },
  data: {
    Tip: "Hello Vue.",
    text: "控制台查看信息",
    TitleText: "Vue生命周期"
  },
  methods: {
    onTest: function() {
      let self = this;
      self.text = "控制台查看信息---";
    }
  },
  // 在data和methods之前执行
  beforeCreate: function() {
    console.log("beforeCreate执行了");
  },
  //在data和methods之后执行
  created() {
    console.log("Create执行了,此时可以获取到data中的字段和methods中的方法");
  },

  // ! 挂载阶段,虚拟dom成真是dom的两个方法

  beforeMount() {
    // 挂载真实DOM之前执行的函数，这里可以预处理data,不会触发update钩子函数
    console.log("beforeMount执行了，挂载真实DOM之前");
    this.text = "控制台查看信息!!!";
  },
  mounted() {
    // 挂载真实DOM之后执行的函数
    //这里可以获取到真实的dom
    console.log("mounted执行了,挂载真实DOM之后");
  },

  // ! 更新阶段
  beforeUpdate() {
    console.log("beforeUpdate函数被触发,此时获取不到更新的真实deom");
    console.log("beforeUpdate:" + this.text);
    this.text = this.text + "!";
  },
  updated() {
    console.log("updated函数被触发,此时可以获取到更新的真实deom");
    console.log("updated:" + this.text);
  },
  beforeDestroy() {
    console.log(
      "beforeDestroy函数触发,可以拆卸数据监视器和事件侦听器之类的事情"
    );
  },
  destroyed() {
    console.log("destroyed");
  }
};
</script>
<style>
</style>


